import React, { useState, useEffect } from 'react'
import Head from 'next/head'
import Link from 'next/link'

import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import Footer from '../components/Footer'

import { Row, Col, List, Breadcrumb } from 'antd'
import { FieldTimeOutlined, VideoCameraOutlined, FireOutlined, FileFilled } from '@ant-design/icons';

import axios from 'axios'
import servicePath from '../config/apiUrl'

const Mylist = ({ data }) => {
  console.log(data);
  const [mylist, setMylist] = useState(data)
  useEffect(() => {
    setMylist(data)
  })
  return (
    <>
      <Head>
        <title>{mylist[0].typeName}</title>
      </Head>
      <Header />
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <div>
            <div className="bread-div">
              <Breadcrumb>
                <Breadcrumb.Item>
                  <a href="/">首页</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>{mylist[0].typeName}</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <List
              itemLayout="vertical"
              dataSource={mylist}
              renderItem={item => (
                <List.Item>
                  <div className="list-title">
                    <Link href={{ pathname: '/detailed', query: { id: item.id } }}>
                      <a>{item.title}</a>
                    </Link>
                  </div>
                  <div className="list-icon">
                    <span>
                      <FieldTimeOutlined /> {item.addTime}
                    </span>
                    <span>
                      <VideoCameraOutlined /> {item.typeName}
                    </span>
                    <span>
                      <FireOutlined /> {item.view_count}人
                    </span>
                    <span>
                      <FileFilled /> 共 {item.part_count} 集
                    </span>
                  </div>
                  <div className="list-context">{item.introduce}</div>
                </List.Item>
              )}
            />
          </div>
        </Col>
        <Col className="comm-box" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
        </Col>
      </Row>
      <Footer />
    </>
  )
}

Mylist.getInitialProps = async (content) => {
  let id = content.query.id
  // const res = await axios(servicePath.getArticleById + id)
  const promise = new Promise((resolve) => {
    axios(servicePath.getListById + id).then(res => {
      resolve(res.data)
    })
  })
  return promise
}

export default Mylist